<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normal.css">
    <link rel="stylesheet" href="css/wj_Agency.css">


</head>
<style>
    .header_wj_Agency {
        width: 100%;
        height: 50px;
        background-color: white;
    }

    .header_wj_Agency_box {
        width: 1400px;
        height: 50px;
        margin: 0 auto;
        display: flex;
    }

    .header_wj_Agency_box_diamonds {
        width: 5px;
        height: 18px;
        background-color: #2DB7F5;
        margin-top: 16px;
        margin-left: 20px;
    }

    .header_wj_Agency_box_title {
        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        color: #999999;
        text-align: left;
        line-height: 50px;
        margin-left: 5px;
    }


    /* 新增css样式 */
    #addModel {
        width: 100%;
        height: 100%;
        display: none;
        position: relative;
        z-index: 999;

    }

    #frmchange {
        width: 800px;
        height: 450px;
        background-color: rgb(255, 255, 255);
        border: #a7bbc8 1px solid;
        border-radius: 10px;
        text-align: center;
        -webkit-box-shadow: 0px 0px 77px 10px #616f9b;
        -moz-box-shadow: 0px 0px 77px 10px #6d7981;
        box-shadow: 0px 0px 77px 10px #6d7981;
        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
        position: fixed;
        left: calc(50% - 400px);
        top: calc(50% - 225px);
    }

    #frmchange h3 {
        color: #2C3675;
        font-size: 24px;
        background-color: rgba(202, 202, 202, .8);
        text-align: left;
        border-radius: 10px 10px 0 0;
        padding: 7px 0;
        padding-left: 40px;
        color: white;
    }

    #frmchange div {
        font-size: 14px;
        width: auto;
        position: absolute;
        left: 0;
        box-sizing: border-box;
        height: 40px;
    }

    #frmchange div:nth-child(2) {
        top: 50px;
        left: 100px;
    }

    #frmchange div:nth-child(3) {
        top: 50px;
        left: 400px;
    }

    #frmchange div:nth-child(4) {
        top: 100px;
        left: 100px;
    }

    #frmchange div:nth-child(5) {
        top: 100px;
        left: 400px;
    }

    #frmchange div:nth-child(6) {
        top: 150px;
        left: 100px;
    }

    #frmchange div:nth-child(7) {
        top: 150px;
        left: 400px;
    }

    #frmchange div:nth-child(8) {
        top: 200px;
        left: 100px;
    }

    #frmchange div:nth-child(9) {

        top: 200px;
        left: 400px;
    }

    #frmchange div:nth-child(10) {
        top: 250px;
        left: 100px;
    }

    #frmchange div:nth-child(11) {
        top: 250px;
        left: 400px;
    }

    #frmchange div:nth-child(12) {
        top: 300px;
        left: 100px;
    }

    #frmchange input {
        margin-top: 20px;
        padding-left: 10px;
        height: 40px;
        color: black;
        width: 240px;
        border-radius: 5px;
        border: 1px solid rgba(6, 6, 6, .6);
        box-sizing: border-box;
    }

    #frmchange #btn-primary2 {
        background-color: #2C57FD;
        color: white;
        width: 120px;
        height: 40px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        bottom: 20px;
        left: 200px;
    }

    #frmchange #btn-cancel2 {
        background-color: rgb(212, 210, 210);
        color: black;
        width: 120px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        bottom: 20px;
        right: 200px;
        border: 0;
    }

    .show {
        display: block !important;

    }

    .hide {
        display: none !important;
    }

    /* change */
    #changeModel {
        width: 100%;
        height: 100%;
        display: none;
        position: relative;
        z-index: 999;

    }

    #frmAdd {
        width: 800px;
        height: 450px;
        background-color: rgb(255, 255, 255);
        border: #a7bbc8 1px solid;
        border-radius: 10px;
        text-align: center;
        -webkit-box-shadow: 0px 0px 77px 10px #616f9b;
        -moz-box-shadow: 0px 0px 77px 10px #6d7981;
        box-shadow: 0px 0px 77px 10px #6d7981;
        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
        position: fixed;
        left: calc(50% - 400px);
        top: calc(50% - 225px);
    }

    #frmAdd h3 {
        color: #2C3675;
        font-size: 24px;
        background-color: rgba(202, 202, 202, .8);
        text-align: left;
        border-radius: 10px 10px 0 0;
        padding: 7px 0;
        padding-left: 40px;
        color: white;
    }

    #frmAdd div {
        font-size: 14px;
        width: auto;
        position: absolute;
        left: 0;
        box-sizing: border-box;
        height: 40px;
    }

    #frmAdd div:nth-child(2) {
        top: 50px;
        left: 100px;
    }

    #frmAdd div:nth-child(3) {
        top: 50px;
        left: 400px;
    }

    #frmAdd div:nth-child(4) {
        top: 100px;
        left: 100px;
    }

    #frmAdd div:nth-child(5) {
        top: 100px;
        left: 400px;
    }

    #frmAdd div:nth-child(6) {
        top: 150px;
        left: 100px;
    }

    #frmAdd div:nth-child(7) {
        top: 150px;
        left: 400px;
    }

    #frmAdd div:nth-child(8) {
        top: 200px;
        left: 100px;
    }

    #frmAdd div:nth-child(9) {

        top: 200px;
        left: 400px;
    }

    #frmAdd div:nth-child(10) {
        top: 250px;
        left: 100px;
    }

    #frmAdd div:nth-child(11) {
        top: 250px;
        left: 400px;
    }

    #frmAdd div:nth-child(12) {
        top: 300px;
        left: 100px;
    }

    #frmAdd input {
        margin-top: 20px;
        padding-left: 10px;
        height: 40px;
        color: black;
        width: 240px;
        border-radius: 5px;
        border: 1px solid rgba(6, 6, 6, .6);
        box-sizing: border-box;
    }

    #frmAdd #btn-primary {
        background-color: #2C57FD;
        color: white;
        width: 120px;
        height: 40px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        bottom: 20px;
        left: 200px;
    }

    #frmAdd #btn-cancel {
        background-color: rgb(212, 210, 210);
        color: black;
        width: 120px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        bottom: 20px;
        right: 200px;
        border: 0;
    }

    /* 主体css样式 */
    .main_wj_Agency {
        width: 100%;
        height: auto;
        margin-top: 20px;
    }

    .main_wj_Agency_tablehead {
        width: 1400px;
        height: 100px;
        margin: 0 auto;

        font-size: 14px;
        color: rgba(0, 0, 0, .85);
    }

    .main_wj_Agency_tablehead_input {
        width: 245px;
        color: #999999;
        margin-left: 20px;
        height: 30px;
        font-size: 14px;
        box-sizing: border-box;
        padding: 0 5px;
        outline: none;
    }

    .main_wj_Agency_tablehead>span {
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        color: #333333;
        margin-left: 20px;
    }

    .main_wj_Agency_tablehead>select {
        margin-left: 10px;
        width: 100px;
        height: 30px;
        padding: 2px;
        outline: none;
    }

    .main_wj_Agency_tablehead_btn {
        margin-top: 20px;
        margin-left: 20px;
    }

    .main_wj_Agency_tablehead_btn>ul {
        overflow: hidden;
    }

    .main_wj_Agency_tablehead_btn>ul li {
        float: left;
    }

    .main_wj_Agency_tablehead_btn>ul li>button {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 0;
        margin-right: 20px;
        color: white;
    }

    .main_wj_Agency_tablehead_btn_Inquire {
        background-color: #0066CC;
    }

    .main_wj_Agency_tablehead_btn_reset {
        background-color: #4BD863;
    }

    .main_wj_Agency_tablehead_btn_quash {
        background-color: #2DB7F5;
    }


    .main_wj_Agency_tablecontent {
        width: 1400px;
        /* height: 400px; */
        margin: 0 auto;

    }

    .main_wj_Agency_tablecontent>table {
        width: 100%;
        text-align: left;
        border-radius: 2px 2px 0 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .main_wj_Agency_tablecontent_head {
        background-color: #fafafa;
        font-size: 14px;
        color: rgba(0, 0, 0, .85);
    }

    .main_wj_Agency_tablecontent_head>th {
        width: 110px;
        color: rgba(0, 0, 0, .85);
        padding: 12px 8px;
        position: relative;
        color: rgba(0, 0, 0, .85);
        font-weight: 400;
        text-align: left;
        background: #fafafa;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        text-align: center;
    }

    .main_wj_Agency_tablecontent_head>th:first-child {
        width: 16px;
        border-top-left-radius: 2px;
        padding-top: 16px;
    }

    .main_wj_Agency_tablecontent_head>th:first-child>input {
        width: 16px;
        height: 16px;
    }

    .main_wj_Agency_tablecontent_head>th:nth-child(2) {
        width: 50px;
    }

    .main_wj_Agency_tablecontent_head>th:last-child {
        width: 200px;
    }


    #tbCard {
        text-align: center;
        font-size: 14px;
    }

    #tbCard>tr {
        /* background-color: #fafafa; */
        font-size: 14px;
        color: rgba(0, 0, 0, .85);
    }

    #tbCard>tr>td {
        width: 100px;
        color: rgba(0, 0, 0, .85);
        padding: 12px 8px;
        position: relative;
        font-weight: 400;
        text-align: left;
        /* background: #fafafa; */
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        text-align: center;

    }

    #tbCard>tr>td input {
        width: 16px;
        height: 16px;
    }

    #tbCard>tr>td button {
        width: 60px;
        height: 25px;
        border: 0;
        border-radius: 3px;
    }

    #tbCard>tr>td:first-child {
        width: 16px;
        border-top-left-radius: 2px;
        padding-top: 16px;
    }

    #tbCard>tr>td:nth-child(2) {
        width: 80px;
    }

    #tbCard>tr>td:nth-child(3) {
        width: 80px;
    }

    #tbCard>tr>td:last-child {
        padding: 0;
    }

    .modify {
        float: left;
        background-color: #4BD863;
        color: white;
        margin-left: 30px;
        transition: all .2s linear;
    }

    .modify:hover {
        opacity: .85;
    }

    .del {
        float: left;
        background-color: #ff0000;
        color: white;
        margin-left: 10px;
        transition: all .2s linear;
    }

    .del:hover {
        opacity: .85;
    }


    /*第一张表中最下面的表格导航中的p的格式*/
    #lowerLbl p:first-child {
        margin-left: 60px;

    }

    #lastPage {
        width: 60px;
        height: 30px;
        font-size: 13px;
        background-color: transparent;
        border: 1px solid rgb(169, 169, 169);
        border-radius: 2px;
        padding: 0;
        float: left;
        margin-left: 20px;
    }

    #nextPage {
        width: 60px;
        height: 30px;
        font-size: 13px;
        background-color: transparent;
        border: 1px solid rgb(169, 169, 169);
        border-radius: 2px;
        padding: 0;
        float: left;
    }

    #pno {
        background-color: transparent;
        width: 40px;
        height: 30px;
        border-radius: 2px;
        border: 1px solid gray;
        font-size: 13px;
        padding: 0;
        float: left;
        background-color: #009688;
        color: white;
    }

    .page {
        width: 1400px;
        margin: 0 auto;
    }

    table tbody tr{
        transition: all linear .4s;
    }
    table tbody tr:not([id="thead"]):hover {
        cursor: pointer;
        background-color: rgb(240,240,240);
        transition: all linear .4s;
    }
</style>

<body>
    <header class="header_wj_Agency">
        <div class="header_wj_Agency_box">
            <div class="header_wj_Agency_box_diamonds"></div>
            <div class="header_wj_Agency_box_title"><span>选址审批</span></div>

        </div>
    </header>
    <div id="addModel">
        <form id="frmAdd">
            <h3>签约详情</h3>
            <div><input type="number" id="idMessage" placeholder="序号" /></div>
            <div><input type="text" id="nameMessage" placeholder="客户姓名" /></div>
            <div><input type="text" id="phoneMessage" placeholder="客户号码" /></div>
            <div><input type="text" id="businessNameMessage" placeholder="企业名字" /></div>
            <div><input type="text" id="businessTypeMessage" placeholder="企业类型" /></div>
            <div><input type="text" id="inTentTypeMessage" placeholder="意向类型" /></div>
            <div><input type="text" id="InvestmentPerMessage" placeholder="招商人员" /></div>
            <div><input type="text" id="ApprovalStatusMessage" placeholder="审批状态" /></div>
            <div><input type="date" id="SubmissionTimeMessage" placeholder="提交时间" /></div>
            <div><input type="date" id="ApprovalTime" placeholder="审批时间" /></div>
            <div><input type="text" id="ApprovalProcessMessage" placeholder="审批流程" /></div>

            <button id="btn-primary" class="btn btn-primary btn-ls">发布</button>
            <button id="btn-cancel">取消</button>
        </form>
    </div>
    <div class="main_wj_Agency">
        <div class="main_wj_Agency_tablehead">
            <input type="text" placeholder="输入客户姓名/电话/招商人员/企业名" class="main_wj_Agency_tablehead_input" id="search">
            <span>意向类型:</span>
            <select name="" id="select1">
                <option value="全部">全部</option>
                <option value="租房">租房</option>
                <option value="买房">买房</option>
            </select>
            <!-- <span>审批状态:</span>
            <select name="" id="select2">
                <option value="租房">全部</option>
                <option value="租房">签约待审核</option>
                <option value="买房">签约已拒绝</option>
                <option value="买房">签约</option>
            </select>
            <span>企业类型:</span>
            <select name="" id="select3">
                <option value="租房">全部</option>
                <option value="租房">一般企业</option>
                <option value="买房">高新企业</option>
                <option value="买房">小巨人</option>
                <option value="买房">龙头企业</option>
            </select> -->

            <div class="main_wj_Agency_tablehead_btn">
                <ul>
                    <li><button class="main_wj_Agency_tablehead_btn_Inquire" onclick="search()">查询</button></li>
                    <li><button class="main_wj_Agency_tablehead_btn_reset" onclick="reset()">重置</button></li>
                    <li><button class="main_wj_Agency_tablehead_btn_quash" id="addMessage">新增</button></li>
                </ul>
            </div>
        </div>

        <div class="main_wj_Agency_tablecontent">
            <table id="table1">
                <thead>
                    <tr class="main_wj_Agency_tablecontent_head">
                        <th><input type="checkbox" id="cbxAll"></th>
                        <th>序号</th>
                        <th>客户姓名</th>
                        <th>客户电话</th>
                        <th>企业名称</th>
                        <th>企业类型</th>
                        <th>意向类型</th>
                        <th>招商人员</th>
                        <th>审批状态</th>
                        <th>提交时间</th>
                        <th>审批流程</th>
                        <th>审核时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbCard">
                    <!-- <th><input type="checkbox" id="cbxAll"></th>
                    <th>1</th>
                    <th>王先生</th>
                    <th>1539013</th>
                    <th>XXXX</th>
                    <th>XXXX</th>
                    <th>XX</th>
                    <th>XXX</th>
                    <th>-</th>
                    <th>-</th>
                    <th>-</th>
                    <th>-</th>
                    <th>操作</th> -->
                </tbody>
            </table>
        </div>
    </div>
    <div id="lowerLbl" text-align="center">
        <div class="page">

            <button id="lastPage">上一页</button>
            <button id="pno">1</button>
            <button id="nextPage">下一页</button>
        </div>
    </div>
    <!-- <div class="pagination_wj_Agency">
        <div class="pagination_wj_Agency_box">
            <button class="previousPage">上一页</button>
            <div id="but">

            </div>
            <button class="nextPage">下一页</button>
        </div>
    </div> -->
    <div id="changeModel">
        <form id="frmchange">
            <h3>编辑选址</h3>
            <div><input type="number" id="idMessage2" placeholder="序号" /></div>
            <div><input type="text" id="nameMessage2" placeholder="客户姓名" /></div>
            <div><input type="text" id="phoneMessage2" placeholder="客户号码" /></div>
            <div><input type="text" id="businessNameMessage2" placeholder="企业名字" /></div>
            <div><input type="text" id="businessTypeMessage2" placeholder="企业类型" /></div>
            <div><input type="text" id="inTentTypeMessage2" placeholder="意向类型" /></div>
            <div><input type="text" id="InvestmentPerMessage2" placeholder="招商人员" /></div>
            <div><input type="text" id="ApprovalStatusMessage2" placeholder="审批状态" /></div>
            <div><input type="date" id="SubmissionTimeMessage2" placeholder="提交时间" /></div>
            <div><input type="date" id="ApprovalTime2" placeholder="审批时间" /></div>
            <div><input type="text" id="ApprovalProcessMessage2" placeholder="审批流程" /></div>

            <button id="btn-primary2" class="btn btn-primary btn-ls">修改</button>
            <button id="btn-cancel2">取消</button>
        </form>
    </div>
    <script src="../wj/data/messageDate.js"></script>
    <script src="../wj/js/jQuery.js"></script>
    <script src="../wj/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../wj/js/message.js"></script>
    <!-- <script type="text/javascript">
        window.onload = function () {
            let rowsNum = document.getElementById('rowsNum');
            rowsNum.innerHTML = parseInt(user.length);
            displayDate();
            addDelEvent();
            pagina();
        }
        //渲染数据
        function displayDate() {
            $("#tbCard").html('');

            let fragment1 = document.createDocumentFragment();
            for (let i = 0; i < user.length; i++) {
                let tr = document.createElement('tr');
                tr.innerHTML = `
                <td><input type="checkbox"/></td>
                <td>${user[i].id}</td>
                <td>${user[i].name}</td>
                <td>${user[i].phone}</td>
                <td>${user[i].businessName}</td>
                <td>${user[i].businessType}</td>
                <td>${user[i].inTentType}</td>
                <td>${user[i].InvestmentPer}</td>
                <td>${user[i].ApprovalStatus}</td>
                <td>${user[i].SubmissionTime}</td>
                <td>${user[i].ApprovalProcess}</td>
                <td>${user[i].ApprovalTime}</td>
                <td>
                    
                    <button class = "modify">编辑</button>
                    <button class = "del" data-index=${user[i].id}>删除</button>
                    
                </td>
                `;
                let table = document.getElementById('table1');
                fragment1.appendChild(tr);
            }

            $("#tbCard").append(fragment1);

        }

        //添加删除事件
        function addDelEvent() {
            $("#tbCard").on('click', '.del', function (e) {
                let id = $(e.target).attr('data-index');
                DelUserDataById(id);
                displayDate();
            })

        }
        //从数据中删除
        function DelUserDataById(id) {


            for (let i = 0; i < user.length; i++) {
                if (user[i].id == id) {
                    user.splice(i, 1);
                }
            }
            rowsNum.innerHTML = parseInt(user.length);
        }
        //分页
        function pagina() {
            let page = 1;  //第几页
            let no = 0; //
            let serialNumber = user.length;//序号
            onloude(0, 5)//初始页面信息，第一页
            $("#pno").text(page);//页码
            $("#nextPage").click(function(){
                if (no + 5 < serialNumber) {//如果no+5小于数据条数
                    no += 5;
                    page++;
                    $("#pno").text(page);
                    if (serialNumber >= (no + 5)) {
                        onloude(no, no + 5);
                    } else (
                        onloude(no, serialNumber)

                    )
                }
            });
            $("#lastPage").click(function(){
                if (no - 5 >= 0) {
                    no -= 5;
                    page--;
                    $("#pno").text(page);
                    onloude(no, no + 5);
                }
            })
        }

        function onloude(n, a) {
            document.querySelector('tbody').innerHTML = '';
            for (let i = n; i < a; i++) {
                let tr = '<tr><td><input type="checkbox"/></td>'+"<td>"+(user[i].id)+"</td>"+"<td>"+(user[i].name)+"</td>"+"<td>"+(user[i].phone)+"</td>"+"<td>"+(user[i].businessName)+"</td>"+"<td>"+(user[i].businessType)+"</td>"+"<td>"+(user[i].inTentType)+"</td>"+"<td>"+(user[i].InvestmentPer)+"</td>"+"<td>"+(user[i].ApprovalStatus)+"</td>"+"<td>"+(user[i].SubmissionTime)+"</td>"+"<td>"+(user[i].ApprovalProcess)+"</td>"+"<td>"+(user[i].ApprovalTime)+"</td><td><button class = \"modify\">编辑</button><button class = \"del\" data-index=${user[i].id}>删除</button></td></tr>";
                $('#tbCard').append(tr);
            }
        }
        
// let tr = '<tr><td>' + (place[i].id) + '</td><td>' + (place[i].PrincipalName) + '</td><td>' + (place[i].displayStatus) + '</td><td>' + (place[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
        // <td><input type="checkbox"/></td>
        //         <td>${user[i].id}</td>
        //         <td>${user[i].name}</td>
        //         <td>${user[i].phone}</td>
        //         <td>${user[i].businessName}</td>
        //         <td>${user[i].businessType}</td>
        //         <td>${user[i].inTentType}</td>
        //         <td>${user[i].InvestmentPer}</td>
        //         <td>${user[i].ApprovalStatus}</td>
        //         <td>${user[i].SubmissionTime}</td>
        //         <td>${user[i].ApprovalProcess}</td>
        //         <td>${user[i].ApprovalTime}</td>
                // <td>
                    
                //     <button class = "modify">编辑</button>
                //     <button class = "del" data-index=${user[i].id}>删除</button>
                    
                // </td>

        
        //查询
        function search() {
            let table = document.getElementById('table1');
            var seach = document.getElementById("seach").value;
            let selects = document.getElementById('select1');
            var num = table.rows.length - 1;
            if (num > 1) {
                for (var i = 1; i < num + 1; i++) {
                    var content = table.rows[i].innerText;
                    if (content.indexOf(seach) != -1) {
                        table.rows[i].style.display = 'table-row';
                    }
                    else {
                        table.rows[i].style.display = 'none';
                    }
                }
            }
        }



    </script> -->
</body>

</html>